<template>
	<div class="wrap">
		<!-- 搜索条件 -->
		<el-form ref="form" :inline="true" size="small" :model="forms" class="form" label-width="60px">
			<el-form-item label="标题" prop="msg_title">
				<el-input v-model="forms.msg_title" placeholder="请输入标题" clearable />
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
					搜索
				</el-button>
			</p>
		</el-form>
		<div class="answer-bot">
			<el-row style="margin-bottom: 15px">
				<div class="button">
					<el-button type="primary" size="small" plain @click="$refs.add.initData('新增', {})">
						新增消息模版
					</el-button>
				</div>
			</el-row>
			<el-table
				stripe
				highlight-current-row
				:data="tableData"
				:resizable="false"
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
				size="small"
				border
			>
				<el-table-column label="序号" width="60px" type="index" align="center" />
				<el-table-column
					label="模版ID"
					prop="msg_id"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="模版标题"
					prop="msg_title"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="模版内容"
					prop="msg_conent"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="创建时间"
					prop="add_time"
					min-width="180px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column label="操作" width="210" align="center">
					<template slot-scope="scope">
						<el-link
							type="primary"
							:underline="false"
							@click="$refs.add.initData('新增', scope.row)"
						>
							编辑
						</el-link>
						<el-link type="primary" :underline="false" @click="onDelete(scope.row, scope.$index)">
							删除
						</el-link>
						<el-link
							type="primary"
							:underline="false"
							@click="$refs.send.initData(scope.row)"
							style="margin: 0"
						>
							手动发送短信
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="forms.pageNo"
						:limit.sync="forms.pageSize"
						scroll-el="el-main"
						@pagination="pageChange"
					/>
				</el-col>
			</el-row>
		</div>
		<details-notice ref="details" />
		<AddNotice ref="add" />
		<SendNotice ref="send" />
	</div>
</template>

<script>
	import { getMessageList, deleteMessage } from '@/api/message'
	import Pagination from '@/components/Pagination'
	import DetailsNotice from './components/details'
	import AddNotice from './components/add'
	import SendNotice from './components/send'
	export default {
		components: {
			Pagination,
			DetailsNotice,
			AddNotice,
			SendNotice
		},
		data() {
			return {
				forms: {
					msg_title: '',
					pageNo: 1,
					pageSize: 10
				},

				total: 0,
				tableData: [],
				dialogVisible: false,
				formData: {},
				dateOptions: {
					// 可选日期限制，最小可选值为当前日期
					disabledDate: time => {
						return time <= new Date().getTime() - 24 * 60 * 60 * 1000
					}
				}
			}
		},
		created() {
			this.searchData()
		},
		methods: {
			// 搜索
			searchData() {
				this.forms.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.forms.pageNo = page
				this.forms.pageSize = limit
				this.loadData()
			},
			loadData() {
				this.tableData = []
				const loading = this.$setLoading()
				getMessageList(this.forms).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			onDelete(row, index) {
				this.$confirm('确定要删除当前消息模版吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(async () => {
						const res = await deleteMessage({
							msg_id: row.msg_id
						})
						this.$message.success('删除成功！')
						this.tableData.splice(index, 1)
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		.roles-table {
			margin-top: 30px;
		}

		.tree-label {
			font-size: 14px;
			color: #606266;
			font-weight: bolder;
			padding-left: 9px;
		}

		.permission-tree {
			margin: 30px;
		}
	}

	.el-link {
		margin-right: 16px;
	}
	.form {
		background: #ffffff;
		padding: 20px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
</style>
